<template>
    <movable-area class="drag-area" :style="{ height: dragHeight + 'px', top: windowTop + navHeight + 'px' }">
        <movable-view class="drag-view" :style="{ height: height + 'px', width: width + 'px' }" inertia out-of-bounds direction="all" :x="x" :y="y" @change="onChange" @touchend="onTouchend">
            <view :id="uuid" style="display: inline-block;" :style="{ height: height + 'px', width: width + 'px' }"><slot /></view>
        </movable-view>
    </movable-area>
</template>

<script>
function guid(len = 32, firstU = true, radix = null) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [];
    radix = radix || chars.length;

    if (len) {
        // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
        for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
    } else {
        let r;
        // rfc4122标准要求返回的uuid中,某些位为固定的字符
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';

        for (let i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | (Math.random() * 16);
                uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
            }
        }
    }
    // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
    if (firstU) {
        uuid.shift();
        return 'u' + uuid.join('');
    } else {
        return uuid.join('');
    }
}
export default {
    name: 'drag-area',
    props: {
        customTabbar: {
            type: Boolean,
            default: false
        },
        customNav: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number,
            default: 0
        },
        height: {
            type: Number,
            default: 0
        },
        x: {
            type: Number,
            default: 0
        },
        y: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            uuid: guid(),
            top: 0,
            left: 0,
            offsetWidth: 0,
            offsetHeight: 0,
            winWidth: 375,
            winHeight: 750,
            windowTop: 0,
            statusBarHeight: 20,
            safeAreaBottom: 0
        };
    },
    computed: {
        navHeight() {
            const { customNav, statusBarHeight } = this;
            if (!customNav) return 0;
            return statusBarHeight + 44;
        },
        tabbarHeight() {
            const { customTabbar, safeAreaBottom } = this;
            if (!customTabbar) return 0;
            return safeAreaBottom + 50;
        },
        dragHeight() {
            const { winHeight, navHeight, tabbarHeight } = this;
            return this.winHeight - navHeight - tabbarHeight;
        }
    },
    created() {
        const sysInfo = uni.getSystemInfoSync();
        this.winWidth = sysInfo.windowWidth;
        this.winHeight = sysInfo.windowHeight;
        this.statusBarHeight = sysInfo.statusBarHeight;
        this.windowTop = sysInfo.windowTop;
        this.safeAreaBottom = sysInfo.safeAreaInsets.bottom;
    },
    methods: {
        onChange(e) {
            // this.left = e.detail.x;
            // this.top = e.detail.y;
            this.$emit('touchmove', e);
        },
        // onTouchmove(e) {
        //   console.log(e)
        //   // 单指触摸
        //   if (e.touches.length !== 1) return;

        //   // this.left = e.touches[0].clientX - this.offsetWidth;
        //   this.$emit('touchmove', e)
        // },
        onTouchend(e) {
            this.$emit('touchend', e);
        }
    }
};
</script>

<style lang="scss" scoped>
.drag-area {
    position: fixed;
    top: 0;
    left: 0;
    height: calc(100% - constant(safe-area-inset-bottom));
    height: calc(100% - env(safe-area-inset-bottom));
    width: 100%;
    z-index: 190;
    pointer-events: none;
}

.drag-view {
    pointer-events: auto;
    left: 670rpx;
    position: relative;
    top: 0;
    left: 0;
}
</style>
